<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .content {
      margin: 150px auto;
      width: 900px;
    }
  </style>
</head>
<body>
  <div id="app" class="content">
    <span>Message: {{msg | capitalize}}</span>
    <span v-once>this will never change: {{msg}}</span>
    <div v-html="rawHtml"></div>
    <span v-bind:id="dynamicId">this span's id is from data</span>
    <button v-bind:disabled="condition">button</button>
    <!-- <a v-bind:href="url"></a> 的缩写-->
    <a :href="url">我是一个链接</a>
    <br>
    <a href="javascript: void(0);" @click="onClick">点我一下试试</a>
  </div>
  <script src="../js/lib/vue.js"></script>
  <script src="../js/lib/art-template.js"></script>
  <script src="../js/lib/jquery-2.1.1.js"></script>
  <script>   
    var data = {
      msg: 'abcdefg',
      dynamicId: '001',
      url: 'www.baidu.com', 
      condition: false,
      onClick: function() {
        alert('on click');
      },
      rawHtml: "<h1>888</h1>"};
    var app = new Vue({
      el: "#app",
      data: data,      
      filters: {
        capitalize: function (value) {
          if (!value) return ''
          value = value.toString()
          return value.charAt(0).toUpperCase() + value.slice(1)
        }
      }
    });
  </script>
</body>
</html>